<template>
    <ProTable
        ref="proTableRef"
        :loading="table.isRefresh"
        :defaultExpandAll="table.defaultExpandAll"
        controllerUrl="menu"
        :stripe="false"
        :data="table.data"
        :columns="columns"
        :headerActionTypes="['add', 'export', 'delete', 'batchDelete', 'expandAll', 'search', 'dynamicQuery']"
        :columnActionTypes="['dragSort', 'assign', 'edit', 'delete']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    >
        <template #form>
            <MenuForm ref="formRef" @onTableAction="onTableAction"></MenuForm>
            <AssignPermissionsForm ref="assignFormRef" label="label" :getDataApi="getAllApis" @onTableAction="onTableAction"></AssignPermissionsForm>
        </template>
    </ProTable>
</template>

<script setup lang="tsx">
import { ProTableApi } from '@/api/common/proTableApi'
import { MenuType } from '@/api/auth/menu/types'
import { QueryFormItem, SelectOptions } from '@/types/queryform'
import { getMenuTagType } from '@/utils/common'

const { table, formRef, assignFormRef, proTableRef, onTableAction } = useTable({
    api: new ProTableApi('menu'),
    sort: 'sort',
    isPage: false,
    isReload: true,
})

const columns = reactive<Array<TableColumnType<MenuType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        prop: 'title',
        label: '标题',
        width: '150',
        fixed: 'left',
    },
    {
        prop: 'name',
        label: '名称',
        showOverflowTooltip: true,
    },
    {
        prop: 'path',
        label: '地址',
        showOverflowTooltip: true,
    },
    {
        prop: 'componentPath',
        label: '组件地址',
        showOverflowTooltip: true,
    },
    {
        prop: 'redirect',
        label: '重定向地址',
        showOverflowTooltip: true,
    },
    {
        type: 'icon',
        prop: 'icon',
        label: '图标',
        align: 'center',
        width: '65',
    },
    {
        prop: 'type',
        label: '类型',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            const tag = getMenuTagType(scope.row.type)
            return <el-tag type={tag?.type}>{tag?.value}</el-tag>
        },
    },
    {
        prop: 'permission',
        label: '权限字段',
        showOverflowTooltip: true,
    },
    {
        prop: 'description',
        label: '描述',
        showOverflowTooltip: true,
    },
    {
        prop: 'sort',
        label: '排序',
        align: 'center',
        width: '65',
    },
    {
        prop: 'isEnabled',
        label: '状态',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            const onChange = async () => {
                await onTableAction('enabled', { id: scope.row.id, message: scope.row.isEnabled ? '禁用' : '启用' })
            }
            return <el-switch inline-prompt active-text="启用" inactive-text="禁用" onChange={onChange} model-value={scope.row.isEnabled}></el-switch>
        },
    },
    {
        label: '隐藏',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            return <el-tag type={scope.row.isHidden ? 'info' : 'success'}>{scope.row.isHidden ? '隐藏' : '显示'}</el-tag>
        },
    },
    {
        label: '缓存',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            return <el-tag type={scope.row.isKeepalive ? 'success' : 'info'}>{scope.row.isKeepalive ? '是' : '否'}</el-tag>
        },
    },
    {
        type: 'switch',
        prop: 'isAffis',
        label: '固定',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            return <el-tag type={scope.row.isAffis ? 'info' : 'success'}>{scope.row.isAffis ? '固定' : '活动'}</el-tag>
        },
    },
    {
        type: 'datetime',
        prop: 'createDateTime',
        default: 'YYYY-MM-DD HH:mm:ss',
        label: '创建时间',
        align: 'center',
        width: '200',
    },
])

const formItems = reactive<Array<FormItem<MenuType>>>([
    {
        type: 'treeSelect',
        name: 'parentId',
        label: '上级菜单',
        placeholder: '请选择上级菜单',
        options: (): SelectOptions[] => {
            const { menus } = useAdminStore()
            const getChild = (arr: any[]): SelectOptions[] => {
                const options: SelectOptions[] = []
                arr.forEach((item) => {
                    if (item.children && item.children.length != 0) {
                        const child = getChild(item.children)
                        options.push({ label: item.title, value: item.id, children: child })
                    } else {
                        options.push({ label: item.title, value: item.id })
                    }
                })
                return options
            }
            return getChild(menus)
        },
    },
    {
        name: 'name',
        label: '名称',
        placeholder: '请输入菜单名称',
    },
    {
        name: 'title',
        label: '标题',
        placeholder: '请输入菜单标题',
    },
    {
        name: 'path',
        label: '路由地址',
        placeholder: '请输入路由地址',
    },
    {
        type: 'select',
        name: 'componentPath',
        label: '组件地址',
        placeholder: '请选择组件地址',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            const views = Object.keys(import.meta.glob('@/views/**/*.vue')).filter((item) => !item.includes('Form'))
            const layout = Object.keys(import.meta.glob('@/layout/Layout.vue'))
            views.concat(layout).forEach((item) => {
                options.push({ label: item, value: item })
            })
            return options
        },
    },
    {
        name: 'redirect',
        label: '重定向地址',
        placeholder: '请输入重定向地址',
    },

    {
        type: 'textarea',
        name: 'description',
        label: '描述',
        placeholder: '请输入描述',
    },
    {
        type: 'icon',
        name: 'icon',
        label: '图标',
        placeholder: '请选择图标',
    },
    {
        type: 'radio',
        name: 'type',
        label: '类型',
        placeholder: '请选择类型',
    },
    {
        type: 'number',
        name: 'sort',
        label: '排序',
        placeholder: '请输入排序',
    },
    {
        type: 'switch',
        name: 'isEnabled',
        label: '启用',
    },
    {
        type: 'switch',
        name: 'isHidden',
        label: '隐藏',
    },
    {
        type: 'switch',
        name: 'isKeepalive',
        label: '缓存',
    },
    {
        type: 'switch',
        name: 'isAffis',
        label: '固定',
    },
])

const queryFormItems = reactive<Array<QueryFormItem<MenuType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: '菜单ID',
    },
    {
        type: 'number',
        label: '上级ID',
        name: 'parentId',
        placeholder: '上级菜单ID',
    },
    {
        label: '名称',
        name: 'name',
        placeholder: '模糊查询',
    },
    {
        label: '标题',
        name: 'title',
        placeholder: '模糊查询',
    },
    {
        type: 'select',
        label: '类型',
        name: 'type',
        options: (): SelectOptions[] => [
            { label: '目录', value: 1 },
            { label: '菜单', value: 2 },
            { label: '按钮', value: 3 },
        ],
    },
    {
        type: 'boole',
        label: '是否启用',
        name: 'isEnabled',
    },
    {
        type: 'boole',
        label: '是否隐藏',
        name: 'isHidden',
    },
    {
        type: 'boole',
        label: '是否缓存',
        name: 'isKeepalive',
    },
    {
        type: 'boole',
        label: '是否固定',
        name: 'isAffis',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '更新时间',
        name: 'lastUpdateDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
